<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link th:replace="/common/common::common-head">

</head>
<body>

    <base target="_parent"/>

<!--blogViews-->
<ul class="flow-default" id="LAY_demo1"></ul>
<!--/**首页博客显示**/-->

    <div th:replace="/common/common :: #common-js"></div>
<script>

    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#LAY_demo1' //流加载容器
            ,isAuto: true
            ,isLazyimg: true
            , done: function (page, next) { //加载下一页
                //模拟数据插入
                $.post('queryBlogStatusList', function (data) {
                    ;//将json拆分
                    var demo = data.data.items;
                    setTimeout(function () {
                        var lis = [];
                        var j = 5;//一页显示的数量
                        for (var i = -1; i < j; i++) {
                            lis.push(
                                        '<a href="' + 'homeBlog/' + demo[(page - 1) * j + i + 1].blogId + '">' +
                                            '<div id="ifInfo" class="layui-row" style="margin-top: 1%;padding: 5px;">' +
                                            '    <div class="layui-col-lg8 layui-col-md8 layui-col-sm12 layui-col-xs12  layui-col-lg-offset2 layui-col-md-offset2">\n' +
                                            '        <div class="layui-panel">\n' +
                                            '            <div class="layui-card-header" style="padding: 20px 30px;">\n' +
                                            '                <b class="blogTitle layui-col-lg4 layui-col-md4 layui-col-sm4 layui-col-xs4">' + demo[(page - 1) * j + i + 1].blogTitle + '</b>\n' +
                                            '                <span class="blogTitle layui-col-lg2 layui-col-md2 layui-col-sm2 layui-col-xs2 layui-col-lg-offset2 layui-col-md-offset2  layui-col-sm-offset2 layui-col-xs-offset2" style="background: rgba(243,240,240,0.69);padding: 8px 8px;border-radius: 10px;">' + demo[(page - 1) * j + i + 1].blogMemo + '</span>\n' +
                                            '            </div>\n' +
                                            '            <div class="layui-card-body">\n' +
                                            '                <div class="value">\n' +
                                            '                    ' + demo[(page - 1) * j + i + 1].blogValue + '\n' +
                                            '                </div>\n' +
                                            '            </div>\n' +
                                            '            <div class="layui-card-header blogMemo" style="padding: 5px 30px;">\n' +
                                            '                <span>' + demo[(page - 1) * j + i + 1].userName + '</span>\n' +
                                            '                &nbsp;&nbsp;<i class="fa fa-code"></i>&nbsp;&nbsp;\n' +
                                            '                <span>' + demo[(page - 1) * j + i + 1].blogDate + '</span>\n' +
                                            '            </div>\n' +
                                            '        </div>\n' +
                                            '    </div>\n' +
                                            '</div>' +
                                        '</a>'
                                )
                            var sessionBlogId = sessionStorage.setItem('blogId', demo.blogId)
                            var sessionUserName = sessionStorage.setItem('userName', demo.userName)
                            var sessionBlogTitle = sessionStorage.setItem('blogTitle', demo.blogTitle)
                            var sessionBlogStatus = sessionStorage.setItem('blogStatus', demo.blogStatus)
                            var sessionBlogMemo = sessionStorage.setItem('blogMemo', demo.blogMemo)
                            var sessionBlogValue = sessionStorage.setItem('blogValue', demo.blogValue)
                        }
                        var ym = Math.ceil(demo.length / i);//计算总页数 根据数据长度 向下取整
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < ym - 1); //假设总页数为   ym-1 避免 20/3 = 7 ..1 导致错误
                    }, 300);

                })
            }
        });
    });
</script>
</body>
</html>